<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
</head>

<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <!-- <button class="layui-btn layui-btn-default layui-btn-sm data-add-btn" lay-event="add"> 添加退款 </button> -->
                <button class="layui-btn layui-btn-sm layui-btn-default data-delete-btn" lay-event="add"> 新增</button>

                <button class="layui-btn layui-btn-sm layui-btn-default data-delete-btn" lay-event="delAll"> 删除
                </button>
            </div>
        </script>
        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-default layui-btn-xs data-count-edit" lay-event="guanLi">管理</a>
            <a class="layui-btn layui-btn-default layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-default data-count-delete" lay-event="deleteOne">删除</a>
        </script>
    </div>
</div>
<script src="/lib/layui/layui.js" charset="utf-8"></script>
<script src="/lib/axios/axios.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'table'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;

        let tableIns = table.render({
            elem: '#currentTableId',
            url: '/dict',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {
                    type: "checkbox",
                    width: 50
                },
                {field: '_id', minWidth: 100, title: '主键', sort: true},
                {field: 'name', minWidth: 100, title: '键', sort: true},
                {
                    field: 'value', minWidth: 100, title: '值', sort: true
                },
                {field: 'remark', minWidth: 100, title: '备注', sort: true},
                {
                    title: '操作', minWidth: 60, align: "center", templet: function (d) {
                            return '<a class="layui-btn layui-btn-xs layui-btn-default data-count-delete" lay-event="deleteOne">删除</a>\n' +
                                '<a class="layui-btn layui-btn-default layui-btn-xs data-count-edit" lay-event="edit">编辑</a>';
                    }
                }
            ]],
            limits: [50, 200, 1000, 2000, 5000],
            limit: 50,
            page: true,
            // skin: 'line'
        });

        /**
         * toolbar监听事件
         */
        table.on('toolbar(currentTableFilter)', function (obj) {
            // let data = obj.data;
            if (obj.event === 'add') {  // 监听删除操作
                addOrEdit();
            }else if (obj.event == 'delAll') {
                delAll()
            }
        });

        table.on('tool(currentTableFilter)', function (obj) {
            const data = obj.data
            if (obj.event === 'deleteOne') {
                layer.confirm('真的删除【' + data.name + '】么?', function (index) {
                    let idArr = []
                    idArr.push(data._id)
                    axios.delete('/dict', {
                        params: {
                            idArr: JSON.stringify(idArr)
                        }
                    }).then(res => {
                        layer.msg('删除成功')
                        tableIns.reload()
                    }).catch(err => {
                        layer.alert(err.message)
                    })
                    layer.close(index);
                });
            }else if(obj.event == 'edit'){
                addOrEdit(data);
            }
        });

        const addOrEdit = (data) => {

            window.data = data
            let index = layer.open({
                title: data ? '修改' : '新增',
                type: 2,
                anim: 4,
                shade: 0.2,
                maxmin: true,
                shadeClose: true,
                area: ['50%', '50%'],
                btn: ['保存', '取消'],
                content: './addOrEdit.html',
                end: function () {
                    window.data = null
                    tableIns.reload();
                },
                btn1: function (index, layero, that) {
                    let childWindow = $(layero).find('iframe')[0].contentWindow
                    // 执行childWindow页面方法
                    let childData = childWindow.formData()
                    if (childData) {
                        let insertData = {
                            name: childData.name,
                            value: childData.value,
                            remark: childData.remark,
                        };
                        if (!data) {
                            // 新增
                            axios.post('/dict', insertData).then(res => {
                                if(res.data.code == 0){
                                    layer.msg('成功')
                                }else{
                                    layer.msg(res.data.msg)
                                }
                            }).catch(err => {
                                layer.msg('失败：', err)
                            })
                        } else {
                            insertData._id = data._id;
                            // 修改
                            axios.put('/dict', insertData).then(res => {
                                layer.msg('成功')
                            }).catch(err => {
                                layer.msg('失败：', err)
                            })
                        }
                        layer.close(index);
                    }
                },
                btn2: function (index, layero, that) {
                    layer.close(index);
                },
            });
        }

        function delAll() {
            var checkStatus = table.checkStatus('currentTableId')
            let data = checkStatus.data;
            console.log("data:" + JSON.stringify(data))
            let idArr = []
            for (const item of data) {
                idArr.push(item._id)
            }
            layer.confirm('真的删除么?', function (index) {
                axios.delete('/dict', {
                    params: {
                        idArr: JSON.stringify(idArr)
                    }
                }).then(res => {
                    layer.msg('删除成功')
                    tableIns.reload()
                }).catch(err => {
                    layer.alert(err.message)
                })
                layer.close(index);
            });
        }

    });
</script>

</body>

</html>